<template>

    <el-form :model="form" label-width="130px" :rules="rules" ref="form" style="margin-top: -12px;">
      <el-form-item :label="lableTitle" class="one-label">
        <!-- 保障 -->
        <div class="span-bar" v-if="fromListPage == 30">
              <div class="flex">
                  <span class="short-input-4 mar-r-10 font-14 font-gray">保障名称</span>
                  <span class="font-14 font-gray">保障值</span>
              </div>
              <div class="flex pad-b-22" v-for="(safeguard,index) in form.goodsSafeguards" :key="index">
                  <el-input v-model="safeguard.safeguardName" placeholder="输入保障名称" class="short-input-2 mar-r-10" maxlength="30"/>
                  <el-input v-model="safeguard.safeguardValue" placeholder="输入保障值" class="long-input-3 mar-r-10" maxlength="250"/>
                  <el-button class="remove-btn"  @click="delSafeguard(safeguard,index)">
                      <svg-icon class="font-16 font-w" icon-class="del"/>
                  </el-button>
              </div>
              <el-button  @click="addSafeguard()">
                  <svg-icon class="font-w mar-r-3" icon-class="add"/> 添加保障
              </el-button>
          </div>
          <!-- 参数 -->
          <div class="span-bar">
              <div class="flex">
                  <span class="short-input-4 mar-r-10 font-14 font-gray">参数名称</span>
                  <span class="font-14 font-gray">参数值</span>
              </div>
              <div class="flex pad-b-22" v-for="(parameter,index) in form.goodsParameters" :key="index">
                  <el-input v-model="parameter.parameterName" placeholder="输入参数名称" class="short-input-2 mar-r-10" maxlength="30"/>
                  <el-input v-model="parameter.parameterValue" placeholder="输入参数值" class="long-input-3 mar-r-10" maxlength="250"/>
                  <el-button class="remove-btn"  @click="delParameter(parameter,index)">
                      <svg-icon class="font-16 font-w" icon-class="del"/>
                  </el-button>
              </div>
              <el-button  @click="addParameter()">
                  <svg-icon class="font-w mar-r-3" icon-class="add"/> 添加参数
              </el-button>
          </div>
      </el-form-item>
    </el-form>
</template>

<script>
  import elDragDialog from '@/directive/el-dragDialog' // base on element-ui

  export default {
    directives: {
      // 拖动窗口
      elDragDialog
    },
    props: {
      fromListPage: { type: Number, default: 30 }
    },
    data() {
      return {
        form: {
          goodsParameters: [],
          // 商品保障列表
          goodsSafeguards: []
        },
        // 左侧标题名称
        lableTitle: '保障/参数设置',
        rules: {
        }
      }
    },
    // 初始化页面
    created() {
      this.initGoodsEdit()
      if (this.fromListPage === 31) {
        this.lableTitle = '参数设置'
      }
    },
    methods: {
      initGoodsEdit() {
        const that = this
        this.$bus.$on('goods.edit.data', function(data) {
          that.form.goodsParameters = that.$utils.isExist(data.goodsParameters) ? data.goodsParameters : []
          that.form.goodsSafeguards = that.$utils.isExist(data.goodsSafeguards) ? data.goodsSafeguards : []
        })
      },
      addParameter() {
        const goodsParameters = this.form.goodsParameters
        const obj = {
          parameterName: '',
          parameterValue: ''
        }
        goodsParameters.push(obj)
        this.form.goodsParameters = goodsParameters
      },
      // 删除参数
      delParameter(parameter, index) {
        const goodsParameters = this.form.goodsParameters
        goodsParameters.splice(index, 1)
        this.form.goodsParameters = goodsParameters
      },
      // 添加保障
      addSafeguard() {
        const goodsSafeguards = this.form.goodsSafeguards
        const obj = {
          safeguardName: '',
          safeguardValue: ''
        }
        goodsSafeguards.push(obj)
        this.form.goodsSafeguards = goodsSafeguards
      },
      // 删除保障
      delSafeguard(safeguard, index) {
        const goodsSafeguards = this.form.goodsSafeguards
        goodsSafeguards.splice(index, 1)
        this.form.goodsSafeguards = goodsSafeguards
      },
      checkForm() {
      }
    }
  }
</script>

<style lang="less" scoped>
    .span-bar{
        padding: 0 50px;
        float: left;
    }
    .remove-btn{
        padding: 7px 6px!important;
    }
    .long-input{
        width: 80%;
    }
    .long-input-2{
        width: 55%;
        margin-right: 5%;
    }
    .long-input-3{
        width: 55%;
    }
    .short-input{
        width: 20%;
    }
    .short-input-2{
        width: 30%;
    }
    .default-input{
        width: 50%;
    }
    .tips{
        color: gray;
        font-size: 12px;
        line-height: 1.2;
        padding-top: 5px;
    }
    .picture{
        width: 130px;
        height: 130px;
        display: block;
    }
    .pic-bar{
        position: relative;
        .close-icon{
            position: absolute;
            right: -30px;
            top: -11px;
            width: 31px;
            height: 40px;
            padding: 0 7px;
            cursor: pointer;
        }
        span{
            position: absolute;
            right: 0;
            bottom: 0;
            width: 100%;
            display: block;
            color: #fff;
            text-align: center;
            padding: 3px 0;
            background: rgba(0,0,0,0.5);
            cursor: pointer;
        }
    }
    .pic-add{
        background: #fff;
        border: #d3d3d3 1px dashed;
        border-radius: 5px;
        padding: 0 45px;
    }
</style>
